<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
  <title>mapDemo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body onload="mapInit();">
  <div id="container">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle bg-white text-black-50" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        图层选择
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" onclick="showRoad()" href="#">线路</a>
        <a class="dropdown-item" onclick="showPipe()" href="#">管道</a>
      </div>
    </div>
  </div>
  <div id="myPageTop">
    <table>
      <tr>
        <td>
          <label>请输入关键字：</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="tipinput"/>
        </td>
      </tr>
    </table>
  </div>
  <div class="modal" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="image">
          <img src="badTree.jpg" alt="">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
        </div>
      </div>
    </div>
  </div>
  <div class="modal" tabindex="-1" role="dialog" id="myModal2">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div id="player"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
        </div>
      </div>
    </div>
  </div>
</body>
<style>
  html{height:100%} 
  body{height:100%;margin:0px;padding:0px} 
  #container{height:100%;position:relative} 

  .image{
    display: inline-block;
    text-align:center;
    padding:10px;
  }
  .image>img{
    width:350px;
    height: 188px;
  }
  .dropdown{
    z-index:1023;
    position:absolute;
    left: 70px;
	  top: 90px;
  }

  .content-window-card {
      position: relative;
      box-shadow: none;
      bottom: 0;
      left: 0;
      width: auto;
      padding: 0;
  }

  .content-window-card p {
      height: 2rem;
  }

  div.info-top {
      position: relative;
      min-width:200px;
      background: none repeat scroll 0 0 #F9F9F9;
      border-bottom: 1px solid #CCC;
      border-radius: 5px 5px 0 0;
  }

  div.info-top div {
      display: inline-block;
      color: #333333;
      font-size: 14px;
      font-weight: bold;
      line-height: 31px;
      padding: 0 10px;
  }

  div.info-top img {
      position: absolute;
      top: 10px;
      right: 10px;
      transition-duration: 0.25s;
  }

  div.info-top img:hover {
      box-shadow: 0px 0px 5px #000;
  }

  div.info-middle {
      font-size: 12px;
      padding: 10px;
      line-height: 20px;
  }

  div.info-bottom {
      height: 0px;
      width: 100%;
      clear: both;
      text-align: center;
  }

  div.info-bottom img {
      position: relative;
      bottom:3px;
      z-index: 104;
  }

  span {
      margin-left: 5px;
      font-size: 11px;
  }

  .info-middle img {
      float: left;
      margin-right: 6px;
  }

  .button-group {
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-size: 12px;
	padding: 10px;
}

.button-group .button {
	height: 28px;
	line-height: 28px;
	background-color: #0D9BF2;
	color: #FFF;
	border: 0;
	outline: none;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 3px;
	margin-bottom: 4px;
	cursor: pointer;
}
.button-group .inputtext {
	height: 26px;
	line-height: 26px;
	border: 1px;
	outline: none;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 3px;
	margin-bottom: 4px;
	cursor: pointer;
}
 /*
.tip {
	position: absolute;
	bottom: 30px;
	right: 10px;
	background-color: #FFF;
	text-align: center;
	border: 1px solid #ccc;
	line-height: 30px;
	border-radius: 3px;
	padding: 0 5px;
	font-size: 12px;
}
*/
#tip {
	background-color: #fff;
	padding-left: 10px;
	padding-right: 10px;
	position: absolute;
	font-size: 12px;
	right: 10px;
	top: 20px;
	border-radius: 3px;
	border: 1px solid #ccc;
	line-height: 30px;
}

/*
#tip input[type='button'] {
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #0D9BF2;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: #fff;
	font-size: 12px;
	border-radius: 3px;
	outline: none;
	border: 0;
}
*/
.amap-info-content {
	font-size: 12px;
}

#myPageTop {
	position: absolute;
	top: 5px;
	left: 70px;
	background: #fff none repeat scroll 0 0;
	border: 1px solid #ccc;
	margin: 10px auto;
	padding:6px;
	font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
	font-size: 14px;
}
#myPageTop label {
	margin: 0 20px 0 0;
	color: #666666;
	font-weight: normal;
}
#myPageTop input {
	width: 170px;
}
#myPageTop .column2{
	padding-left: 25px;
}
.modal-dialog{
  max-width: 642px;
}
</style>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=0bdea0f8a91fbbd623c1107b6ca794f6&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>
<script type="text/javascript">
  function mapInit() {
    var player = new Clappr.Player({source: "http://113.200.144.182:7086/live/cameraid/1000033%243/substream/1.m3u8", parentId: "#player"});
    var buildingLayer = new AMap.Buildings({zIndex:130,merge:false,sort:false,zooms:[17,20]});
    var parkPath= [[108.890148,34.194223],[108.890551,34.195203],[108.890599,34.195662],[108.890572,34.198018],[108.890679,34.198089],[108.894322,34.198103],[108.894676,34.198058],[108.894724,34.197699],[108.894161,34.196683],[108.892664,34.196048],[108.892471,34.195942],[108.892122,34.195609],[108.891881,34.195143],[108.891859,34.194797],[108.892042,34.194056],[108.890261,34.194043],[108.890164,34.194145]];
    var roadPath=[[108.890387,34.198241],[108.890516,34.195654],[108.890457,34.195257],[108.890213,34.194606],[108.888432,34.19162]];
    var roadPath2=[[108.890208,34.198249],[108.890305,34.19678],[108.890374,34.196235],[108.890385,34.195822],[108.890219,34.19505],[108.888314,34.191633]];
    var roadPath3=[[108.884683,34.193919],[108.887724,34.19391],[108.888175,34.193896],[108.890299,34.193927],[108.891613,34.193905],[108.891624,34.193914],[108.892214,34.193799],[108.892568,34.193706]];
    var roadPath4=[[108.884683,34.193772],[108.89163,34.193763],[108.891957,34.19371],[108.892515,34.193586]];
    var roadLine = new AMap.Polyline({
        path: roadPath,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 2,
        strokeColor: "#3CB371", 
        strokeOpacity: 0.7,
        strokeWeight: 6,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })
    var roadLine2 = new AMap.Polyline({
        path: roadPath2,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 2,
        strokeColor: "#3CB371", 
        strokeOpacity: 0.7,
        strokeWeight: 6,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })
    var roadLine3 = new AMap.Polyline({
        path: roadPath3,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 2,
        strokeColor: "#3CB371", 
        strokeOpacity: 0.7,
        strokeWeight: 6,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })
    var roadLine4 = new AMap.Polyline({
        path: roadPath4,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 2,
        strokeColor: "#3CB371", 
        strokeOpacity: 0.7,
        strokeWeight: 6,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })
    var pipePath=[[108.890387,34.198241],[108.890516,34.195654],[108.890457,34.195257],[108.890213,34.194606],[108.888432,34.19162]];
    var pipeLine = new AMap.Polyline({
        path: pipePath,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 2,
        strokeColor: "#A0522D", 
        strokeOpacity: 0.7,
        strokeWeight: 6,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })
    var options = {
      hideWithoutStyle:false,//是否隐藏设定区域外的楼块
      areas:[
        { //围栏1
          //visible:false,//是否可见
          rejectTexture:true,//是否屏蔽自定义地图的纹理
          color1: '7FDDA0DD',//楼顶颜色
          color2: '7FD15FEE',//楼面颜色
          path:parkPath
        }
      ]
    };
    buildingLayer.setStyle(options); //此配色优先级高于自定义mapStyle
    var map = new AMap.Map("container", {
        zoom:17.5,
        // showIndoorMap:false,
        // showLabel:false,
        resizeEnable:true,
        pitch:45,
        rotation:45,
        mapStyle:'amap://styles/1a30447007d1512106a8f7c6ae05c5d6',
        center:[108.889215,34.195236],
        // features:['bg','point','road','building'],
        viewMode:'3D',
        layers:[
        new AMap.TileLayer(),
        buildingLayer,
        ]
    });
    new AMap.Polygon({
        bubble:true,
        fillOpacity:0.4,
        fillColor:'#EE82EE',
        strokeWeight:1,
        path:options.areas[0].path,
        map:map
    })
    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.MapType',
        'AMap.Geolocation',
    ], function(){
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      map.addControl(new AMap.ToolBar());

      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.addControl(new AMap.Scale());

      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      // map.addControl(new AMap.OverView({isOpen:true}));

      // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      map.addControl(new AMap.MapType());

      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      map.addControl(new AMap.Geolocation());

      
      // 点击地图事件
      map.on('click', function(ev) {
        let point=[ev.lnglat.lng,ev.lnglat.lat];
        let inPark = AMap.GeometryUtil.isPointInRing(point,parkPath);
        if(inPark){
          var title = '永阳公园',
          content = [];
          content.push("地址：西安市丈八东路和西沣公路十字路口");
          content.push("营业时间：00:00-24:00");
          content.push("联系电话：暂无"); 
          var infoWindow = new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体
            content: createInfoWindow(title, content.join("<br/>")),
            offset: new AMap.Pixel(16, -45)
          });
          //构建自定义信息窗体
          function createInfoWindow(title, content) {
            var info = document.createElement("div");
            info.className = "custom-info input-card content-window-card";

            //可以通过下面的方式修改自定义窗体的宽高
            //info.style.width = "400px";
            // 定义顶部标题
            var top = document.createElement("div");
            var titleD = document.createElement("div");
            var closeX = document.createElement("img");
            top.className = "info-top";
            titleD.innerHTML = title;
            closeX.src = "https://webapi.amap.com/images/close2.gif";
            closeX.onclick = closeInfoWindow;

            top.appendChild(titleD);
            top.appendChild(closeX);
            info.appendChild(top);

            // 定义中部内容
            var middle = document.createElement("div");
            middle.className = "info-middle";
            middle.style.backgroundColor = 'white';
            middle.innerHTML = content;
            info.appendChild(middle);

            // 定义底部内容
            var bottom = document.createElement("div");
            bottom.className = "info-bottom";
            bottom.style.position = 'relative';
            bottom.style.top = '0px';
            bottom.style.margin = '0 auto';
            var sharp = document.createElement("img");
            sharp.src = "https://webapi.amap.com/images/sharp.png";
            bottom.appendChild(sharp);
            info.appendChild(bottom);
            return info;
          }
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
          infoWindow.open(map,point);
        }
        console.log(point);

        // 触发事件的对象
        var target = ev.target;
        
        // 触发事件的地理坐标，AMap.LngLat 类型
        var lnglat = ev.lnglat;
        
        // 触发事件的像素坐标，AMap.Pixel 类型
        var pixel = ev.pixel;
        
        // 触发事件类型
        var type = ev.type;
      });
      roadLine.setMap(map);
      roadLine2.setMap(map);
      roadLine3.setMap(map);
      roadLine4.setMap(map);
      pipeLine.setMap(map);
      roadLine.hide();
      roadLine2.hide();
      roadLine3.hide();
      roadLine4.hide();
      pipeLine.hide();
      roadLine.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '唐延南路',
        content = [];
        content.push("公路等级：暂无");
        content.push("全长：暂无");
        content.push("道路等级：暂无");
        content.push("路面宽度：暂无");
        content.push("道路负责人：暂无");
        content.push("联系电话：暂无");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      });
      roadLine2.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '唐延南路',
        content = [];
        content.push("公路等级：暂无");
        content.push("全长：暂无");
        content.push("道路等级：暂无");
        content.push("路面宽度：暂无");
        content.push("道路负责人：暂无");
        content.push("联系电话：暂无");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      });
      roadLine3.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '锦业路',
        content = [];
        content.push("公路等级：暂无");
        content.push("全长：暂无");
        content.push("道路等级：暂无");
        content.push("路面宽度：暂无");
        content.push("道路负责人：暂无");
        content.push("联系电话：暂无");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      });
      roadLine4.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '锦业路',
        content = [];
        content.push("公路等级：暂无");
        content.push("全长：暂无");
        content.push("道路等级：暂无");
        content.push("路面宽度：暂无");
        content.push("道路负责人：暂无");
        content.push("联系电话：暂无");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      });
      pipeLine.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '污水管道',
        content = [];
        content.push("长度：暂无");
        content.push("管径：暂无");
        content.push("地下深度：暂无");
        content.push("负责人：暂无");
        content.push("联系电话：暂无");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      })
    });

    //树木图标
    var trees=[
      [108.890543,34.197735],
      [108.890183,34.197357],
      [108.890554,34.196985],
      [108.890242,34.196572],
      [108.890575,34.196013],
      [108.890264,34.195791],
      [108.890457,34.195059],
      [108.889819,34.194496]
    ];
    for(let i=0;i<trees.length;i++){
      let tree=trees[i];
      // 以 icon URL 的形式创建一个途经点
      var viaMarker = new AMap.Marker({
        position: tree,
        // 将一张图片的地址设置为 icon
        icon: '树.png',
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
      });
      viaMarker.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '树木名称',
        content = [];
        content.push(`编号：${'0139000'+(i+1)}`);
        content.push("品名：暂无");
        content.push("种植时间：暂无");
        content.push("介绍：暂无");
        content.push("二维码：<a href='#'>点击查看</a>");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      })
      map.add(viaMarker);
    }

    // 损坏树木图标
    var badTrees=[
      [108.890155,34.195083],
    ];
    for(let i=0;i<badTrees.length;i++){
      let badTree=badTrees[i];
      // 以 icon URL 的形式创建一个途经点
      var viaMarker = new AMap.Marker({
        position: badTree,
        // 将一张图片的地址设置为 icon
        icon: '树(红).png',
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
      });
      viaMarker.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '<span style="color:#F00;">树木名称(已损坏)</span>',
        content = [];
        content.push(`编号：${'0141000'+(i+1)}`);
        content.push("品名：暂无");
        content.push("种植时间：暂无");
        content.push("介绍：暂无");
        content.push("二维码：<a href='#'>点击查看</a>");
        content.push("详情照片：<div class='image'><img src='badTree.jpg' alt=''></div>");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      })
      map.add(viaMarker);
    }

    // 车辆图标
    var cars=[
      [108.887085, 34.193735],
      [108.890352, 34.194779]
    ];
    for(let i=0;i<cars.length;i++){
      let car=cars[i];
      // 以 icon URL 的形式创建一个途经点
      var viaMarker = new AMap.Marker({
        position: car,
        // 将一张图片的地址设置为 icon
        icon: '洒水车.png',
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
      });
      viaMarker.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '任务车辆',
        content = [];
        content.push(i==0?"车牌号：陕A·053GW":"车牌号：陕A·Y279E");
        content.push("当班人：暂无");
        content.push("车辆类型：洒水车");
        content.push("轨迹回放：<a href='#'>点击查看</a>");
        content.push("查看摄像头：<a href='#' onclick='openVideo()'>点击查看</a>");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      })
      map.add(viaMarker);
    }

    // 井盖图标
    var wells=[
      [108.890496, 34.197494],
      [108.890507, 34.195498],
      [108.890163, 34.194281]
    ];
    for(let i=0;i<wells.length;i++){
      let well=wells[i];
      // 以 icon URL 的形式创建一个途经点
      var viaMarker = new AMap.Marker({
        position: well,
        // 将一张图片的地址设置为 icon
        icon: '井盖.png',
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
      });
      viaMarker.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '下水井盖',
        content = [];
        content.push("详情：暂无");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      })
      map.add(viaMarker);
    }

    // 警示牌图标
    var placards=[
      [108.890037, 34.194017],
      [108.890573, 34.198127]
    ];
    for(let i=0;i<placards.length;i++){
      let placard=placards[i];
      // 以 icon URL 的形式创建一个途经点
      var viaMarker = new AMap.Marker({
        position: placard,
        // 将一张图片的地址设置为 icon
        icon: '标识牌.png',
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
      });
      viaMarker.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '标识牌',
        content = [];
        content.push("详情：暂无");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      })
      map.add(viaMarker);
    }

    //路灯图标
    var placards=[
      [108.890606, 34.19739],
      [108.890207, 34.197018],
      [108.890573, 34.196466],
      [108.890291, 34.196145],
      [108.890204, 34.195467],
      [108.890535, 34.195352],
      [108.890008, 34.194783],
      [108.890202, 34.194456]
    ];
    for(let i=0;i<placards.length;i++){
      let placard=placards[i];
      // 以 icon URL 的形式创建一个途经点
      var viaMarker = new AMap.Marker({
        position: placard,
        // 将一张图片的地址设置为 icon
        icon: '路灯.png',
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
      });
      viaMarker.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '路灯',
        content = [];
        content.push("详情：暂无");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      })
      map.add(viaMarker);
    }

    //消防栓图标
    var hydrants=[
      [108.890108,34.198152],
      [108.89057,34.195645],
      [108.88962,34.194025]
    ];
    for(let i=0;i<hydrants.length;i++){
      let hydrant=hydrants[i];
      // 以 icon URL 的形式创建一个途经点
      var viaMarker = new AMap.Marker({
        position: hydrant,
        // 将一张图片的地址设置为 icon
        icon: '消防栓.png',
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
      });
      viaMarker.on('click',(e)=>{
        console.log(e);
        let point=[e.lnglat.lng,e.lnglat.lat];
        let title = '消防栓',
        content = [];
        content.push("详情：暂无");
        var roadWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          offset: new AMap.Pixel(16, -45)
        });
        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement("div");
          info.className = "custom-info input-card content-window-card";
          //可以通过下面的方式修改自定义窗体的宽高
          //info.style.width = "400px";
          // 定义顶部标题
          var top = document.createElement("div");
          var titleD = document.createElement("div");
          var closeX = document.createElement("img");
          top.className = "info-top";
          titleD.innerHTML = title;
          closeX.src = "https://webapi.amap.com/images/close2.gif";
          closeX.onclick = closeInfoWindow;
          top.appendChild(titleD);
          top.appendChild(closeX);
          info.appendChild(top);
          // 定义中部内容
          var middle = document.createElement("div");
          middle.className = "info-middle";
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement("div");
          bottom.className = "info-bottom";
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement("img");
          sharp.src = "https://webapi.amap.com/images/sharp.png";
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
          //关闭信息窗体
          function closeInfoWindow() {
            map.clearInfoWindow();
          }
        }
        roadWindow.open(map,point);
      })
      map.add(viaMarker);
    }
    
    map.roadLine=roadLine;
    map.roadLine2=roadLine2;
    map.roadLine3=roadLine3;
    map.roadLine4=roadLine4;
    map.pipeLine=pipeLine;
    this.map=map;
    this.roadBtn=false;
    this.pipeBtn=false;

    // 搜索模块
    map.plugin(["AMap.ToolBar"], function() {
      map.addControl(new AMap.ToolBar());
    });
    if(location.href.indexOf('&guide=1')!==-1){
      map.setStatus({scrollWheel:false})
    }
    
    //输入提示
    var autoOptions = {
      input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
      map: map
    });  
    //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
      console.log(e);
      placeSearch.setCity(e.poi.adcode);
      placeSearch.search(e.poi.name);  //关键字查询查询
    }
    // AMap.plugin('AMap.Autocomplete', function(){
    //   // 实例化Autocomplete
    //   var autoOptions = {
    //     //city 限定城市，默认全国
    //     city: '全国',
    //     input: "tipinput"
    //   }
    //   var auto = new AMap.Autocomplete(autoOptions);
    //   var placeSearch = new AMap.PlaceSearch({
    //     city:'全国',
    //     map:map
    //   })
    //   //构造地点查询类
    //   AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    //   console.log(0);
    //   function select(e) {
    //     console.log(1,e);
    //     placeSearch.setCity(e.poi.adcode);
    //     placeSearch.search(e.poi.name);  //关键字查询查询
    //   }
    // })
    
  };
  function showRoad(){
    this.roadBtn?this.roadBtn=false:this.roadBtn=true;
    this.pipeBtn=false;
    let map=this.map;
    map.pipeLine.hide()
    if(this.roadBtn){
      map.roadLine.show();
      map.roadLine2.show();
      map.roadLine3.show();
      map.roadLine4.show();
    }else{
      map.roadLine.hide();
      map.roadLine2.hide();
      map.roadLine3.hide();
      map.roadLine4.hide();
    }
  };
  function showPipe(){
    this.pipeBtn?this.pipeBtn=false:this.pipeBtn=true;
    this.roadBtn=false;
    let map=this.map;
    map.roadLine.hide()
    map.roadLine2.hide()
    map.roadLine3.hide()
    map.roadLine4.hide()
    if(this.pipeBtn){
      map.pipeLine.show()
    }else{
      map.pipeLine.hide()
    }
  };
  function openImage(){
    $('#myModal').modal({
      keyboard: false
    })
  }
  function openVideo(){
    $('#myModal2').modal({
      keyboard: false
    })
  }
</script>
</html>